<template>
  <div class="load-more-box" :style="{ color, width: newWidth, padding: moreStatus !== 4 ? '10px' : '0px' }">
    <!-- 有更多 -->
    <template v-if="moreStatus === 1">
      <span class="text" @click="$throttle(loadMoreTap)">{{ isClick ? '点击加载更多' : '下拉加载' }}</span>
    </template>
    <!-- 加载中 -->
    <template v-else-if="moreStatus === 2">
      <base-icon-text loading text="加载中"></base-icon-text>
    </template>
    <!-- 没有更多 -->
    <template v-else-if="moreStatus === 3">
      <span class="icon-logo iconfont"></span>
    </template>
  </div>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue';
  const props = defineProps({
    /** 组件的宽度 */
    width: { type: [Number, String], default: '100%' },
    /** 文字颜色 */
    color: { type: String, default: 'var(--el-text-color-secondary)' },
    /** 加载更多的加载状态 */
    moreStatus: { type: Number as PropType<$PageMoreStatus>, required: true },
    /** 加载更多数据的回调函数 */
    axiosMoreMethod: { type: [Function, undefined] as PropType<(() => void) | undefined>, default: undefined },
  });
  /**
   * 最终宽度
   */
  const newWidth = computed(() => {
    if (typeof props.width === 'number' && props.width > 0) {
      return `${props.width}px`;
    } else if (typeof props.width === 'string' && !isNaN(Number(props.width))) {
      return `${props.width}px`;
    } else if (typeof props.width === 'string' && isNaN(Number(props.width))) {
      return props.width;
    } else {
      return '100%';
    }
  });

  /**
   * 是否可以点击加载更多
   */
  const isClick = computed(() => typeof props.axiosMoreMethod === 'function');

  /**
   * 点击加载
   */
  function loadMoreTap() {
    typeof props.axiosMoreMethod === 'function' && props.axiosMoreMethod();
  }
</script>

<style lang="scss" scoped src="./base-load-more.scss"></style>
